<template>
  <div
    class="header"
    v-if="userInfo"
  >
    <div class="header-box g-con">
      <div class="left">
        <img
          :src="userInfo.avatar"
          alt=""
        />
      </div>
      <div class="center">
        <h3>
          <span>Hi~</span>
          {{ userInfo.userName }}
        </h3>
        <div>{{ t('login.mc') }}: {{ userInfo.userNo }}</div>
        <div>
          {{ userInfo.userTypeName }} - {{ userInfo.enterpriseName }} -
          {{ userInfo.isAdmin === '1' ? t('organizationStructure.OStructure.roleName') : userInfo.customerRoleName }}
        </div>
      </div>

      <!-- <ul class="right">
          <li class="item" v-for="item in 8" :key="item">
              Personal Information
          </li>
      </ul> -->
    </div>
  </div>
</template>
<script setup>
import { onBeforeMount, ref, watch } from 'vue'
import useLogin from '@/stores/login'
import { useI18n } from 'vue-i18n'
import { getCustomerInfoById } from '@/service/personalInformation'
const storeLogin = useLogin()

const { t, locale } = useI18n()
watch(locale, () => {
  init()
})
onBeforeMount(() => {
  init()
})

//
const userInfo = ref(null)
const getData = () => {
  if(!storeLogin?.userInfo?.id) return
  getCustomerInfoById(storeLogin.userInfo.id).then(({ data }) => {
    userInfo.value = data
  })
}

//
const init = () => {
  getData()
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  min-height: 200px;
  .header-box {
    height: 100%;
    margin: 0 auto;
    display: flex;
    padding-top: 23px;
    .left {
      width: 162px;
      height: 162px;
      margin-right: 27px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    .center {
      padding-top: 20px;
      // width: 342px;
      margin-right: 42px;
      h3 {
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 800;
        color: #252628;
        line-height: 22px;
        span {
          color: #ca2a02;
          font-size: 24px;
        }
      }
      div {
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #6a6973;
        font-size: 14px;
        margin-top: 20px;
      }
    }
    .right {
      // width: 535px;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      // justify-content: space-between;
      .item {
        min-width: 151px;
        height: 45px;
        margin-right: 20px;
        background: #ffffff;
        border: 1px solid #ca2a02;
        border-radius: 4px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ca2a02;
        text-align: center;
        line-height: 43px;
      }
    }
  }
}
</style>
